<template>
  <div class="hears">
    <div class="whole">
      <div class="img">
        <img src="../img/兼职王logo6 拷贝 4.png" style="width: 100%" alt="" />
      </div>
      <h1>现在,<br />即将来到王的世界</h1>
      <input
        type="text"
        placeholder="请输入手机号"
        :class="age == !true ? 'account' : 'account accounts'"
        v-model="name"
      />
      <input
        type="text"
        placeholder="请输入手机验证码"
        :class="res == !true ? 'verify' : 'verify accounts'"
        v-model="spans"
      />
      <span
        :class="age == !true ? 'span' : 'span1'"
        v-show="show"
        @click="getCode"
        >发送验证码</span
      >
      <span :class="age == !true ? 'span' : 'span1'" v-show="!show"
        >验证码({{ count }})</span
      ><br />
      <input
        type="checkbox"
        class="agreement"
        v-model="ages"
      />我已阅读并同意<strong @click="user">《用户协议》</strong>和
      <strong @click="privacy">《隐私协议》</strong>
      <button
        :class="res == !true ? 'register' : 'span1 register'"
        @click="register"
      >
        注 册
      </button>
      <p>已有账号 <b @click="enter"> 现在登录</b></p>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import axios from "axios";
export default {
  data() {
    return {
      name: "",
      spans: "",
      count: "",
      show: true,
      age: false,
      ages: false,
      res: false,
      timer: null,
    };
  },
  watch: {
    name(v) {
      if (v.length === 11 && Number(v)) {
        this.age = true;
        this.ages = true;
        console.log(this.age);
      } else {
        this.age = false;
      }
    },
    spans(v) {
      if (
        v.length === 6 &&
        Number(v) &&
        this.age === true &&
        this.ages === true
      ) {
        this.res = true;
        console.log(this.res);
      } else {
        this.res = false;
      }
    },
  },
  methods: {
    getCode() {
      axios
        .get("api/api/userlog/checkphone.do", {
          params: { phone: this.name },
        })
        .then((res) => {
          if (res.data.code == 200) {
            if (this.age == true) {
              this.show = false;
              axios
                .get("api/api/userlog/sendlogin.do", {
                  params: { phone: this.name },
                })
                .then((res) => {
                  console.log(res);
                });
              const TIME_COUNt = 60;
              if (!this.timer) {
                this.count = TIME_COUNt;
                this.show = false;
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= TIME_COUNt) {
                    this.count -= 1;
                  } else {
                    this.show = true;
                    clearInterval(this.timer);
                    this.timer = null;
                  }
                }, 1000);
              }
            }
          } else {
            Toast("手机号已存在或手机号错误");
          }
        });
    },

    user() {
      this.$router.push({
        name: "User",
      });
    },
    privacy() {
      this.$router.push({
        name: "Privacy",
      });
    },
    register() {
      if (this.res === true) {
        this.$router.push({
          path: "/home/my",
        });
      }
    },
    enter() {
      this.$router.push({
        name: "Enter",
      });
    },
  },
};
</script>

<style scoped>
.hears {
  background: url("../img/图.png");
  background-size: 100%;
  overflow: hidden;
}
.whole .accounts {
  border: 1px solid #e58c23;
}
.whole {
  height: 100%;
  padding-left: 60px;
  padding-top: 164px;
}
.img {
  width: 164px;
  height: 164px;
  margin-left: 14px;
}
h1 {
  margin-top: 72px;
  margin-left: 14px;
  font-size: 50px;
}
.account {
  width: 620px;
  height: 106px;
  border-radius: 30px;
  border: 1px solid #c1c1c1;
  margin-top: 20px;
  font-size: 30px;
  text-align: center;
}
.verify {
  width: 398px;
  height: 106px;
  margin-top: 40px;
  border-radius: 30px;
  border: 1px solid #c1c1c1;
  font-size: 30px;
  text-align: center;
}
.span {
  display: inline-block;
  width: 196px;
  height: 106px;
  line-height: 106px;
  font-size: 30px;
  text-align: center;
  border-radius: 30px;
  margin-left: 20px;
  background-color: #c1c1c1;
}
.span1 {
  display: inline-block;
  width: 196px;
  height: 106px;
  line-height: 106px;
  font-size: 30px;
  text-align: center;
  border-radius: 30px;
  margin-left: 20px;
  background-color: #e58c23;
}
.agreement {
  margin-top: 20px;
  margin-left: 50px;
  font-size: 20px;
}
.register {
  width: 610px;
  height: 98px;
  margin-top: 40px;
  margin-left: 6px;
  border-radius: 30px;
  border: 1px solid #c1c1c1;
  font-size: 30px;
  text-align: center;
  border: none;
}
strong {
  color: #e58c23;
}
p {
  width: 100%;
  margin-top: 48px;
  margin-left: 208px;
}
</style>
